<template>
  <view class="song-item" @click="handlePlay">
    <view class="song-info">
      <text class="song-title">{{ song.title }}</text>
      <text class="song-subtitle">{{ song.artist || '未知歌手' }} · {{ song.playlist }}</text>
    </view>
	
    <view class="song-actions" @click.stop="handleAction">
      <uni-icons type="more-filled" size="20" color="#666"></uni-icons>
    </view>
	
  </view>
</template>

<script>
export default {
  props: {
    song: {
      type: Object,
      required: true
    }
  },
  methods: {
    handlePlay() {
		this.$emit('play', this.song);
    },
    handleAction(e) {
		// 确保有事件对象
		e.stopPropagation();
		this.$emit('action', this.song);
    }
  }
}
</script>

<style>
.song-item {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #f0f0f0;
  pointer-events: auto;
  user-select: auto;
}

.song-info {
  flex: 1;
  margin-right: 20rpx;
  overflow: hidden;
  pointer-events: auto;
}

.song-title {
  font-size: 30rpx;
  color: #333;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: auto;
}

.song-subtitle {
  font-size: 24rpx;
  color: #999;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 8rpx;
  pointer-events: auto;
}

.song-duration {
  font-size: 26rpx;
  color: #666;
  margin-right: 20rpx;
}

.song-actions {
  width: 60rpx;
  display: flex;
  justify-content: flex-end;
}
</style>